<template>
    <div id="payrollSearch">
        <el-form :inline="true" :model="formInline" :ref="searchFormName" label-position="right" label-width="120px" class="payrollSearch-form">
            <!-- 搜索条件 -->
            <div class="payrollSearch-criteria">
                <!-- 默认搜索区 start -->
                <el-form-item label="员工姓名" prop="staffName">
                    <el-input v-model="formInline.staffName" placeholder="请输入" clearable>
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                </el-form-item>

                <el-form-item label="客户工号：" prop="clientJobNumber">
                    <el-input v-model="formInline.clientJobNumber" placeholder="请输入" clearable>
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                </el-form-item>

                <el-form-item label="证件号码" prop="idNumber">
                    <el-input v-model="formInline.idNumber" placeholder="请输入" clearable>
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                </el-form-item>

                <el-form-item label="手机号" prop="mobile">
                    <el-input v-model="formInline.mobile" placeholder="请输入" clearable>
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                </el-form-item>
                 <!-- 默认搜索区 end -->

                <!-- 高级搜索区域 start -->
                <collapse-item :collapseStatus="collapseStatus">
                    <el-form-item label="银行卡号" prop="cardNo">
                        <el-input v-model="formInline.cardNo" placeholder="请输入" clearable>
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="顺丰金融账号：" prop="financialAccount">
                        <el-input v-model="formInline.financialAccount" placeholder="请输入" clearable>
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="用工状态" prop="staffState">
                        <el-select v-model="formInline.staffState" placeholder="默认选择“正式”" clearable>
                            <el-option
                                v-for="item in progressOptions"
                                :key="item.label"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </collapse-item>
                <!-- 高级搜索区域 end -->
            </div>
            <!-- 搜索条件 end -->
           

            <!-- 搜索按钮 start -->
            <div class="payrollSearch-button">
                <div><collapse-link :collapseStatus="collapseStatus" :toggle="toggle"></collapse-link></div>
                <el-form-item>
                    <el-link :underline="false" type="primary" class="underline" @click="resetForm(searchFormName)">清除搜索</el-link>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSearch">搜索</el-button>
                </el-form-item>
            </div>
            <!-- 搜索按钮 end -->
        </el-form>
        
    </div>
</template>

<script>
// 引入折叠搜索条件组件
import collapseLink from "../../components/searchCollapse/collapseLink";
import collapseItem from "../../components/searchCollapse/collapseItem";

export default {
    name: "companySearch",
    data() {
        return {
            searchFormName: 'searchForm',   // 搜索表单名称
            collapseStatus: false,          // 是否展开高级搜索
            // 默认搜索区
            formInline: {
                staffName: "",            // 员工姓名
                clientJobNumber: "",      // 客户工号
                idNumber: "",             // 证件号码
                mobile: "",               // 手机号
                cardNo:"",                // 银行卡号
                financialAccount:"",      // 顺丰金融账号
                staffState:"",            // 用工状态
            },

            // 用工状态多下拉框状态
            progressOptions: [{
                value: '正式',
                label: '正式'
            }, {
                value: '试用期',
                label: '试用期'
            }, {
                value: '辞职',
                label: '辞职'
            }],
        }
    },
    methods: {
        // 点击搜索
        onSearch() {
            console.log(this.formInline);
            console.log('点击搜索...');
        },
        // 切换搜索条件折叠状态
        toggle() {
            this.collapseStatus = !this.collapseStatus;
        },
        // 重置搜索表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    components: {collapseLink, collapseItem}
}
</script>

<style lang="less" scoped>
    /* 链接下划线 */
    .underline {
        text-decoration: underline;
    }

    /* 输入框宽度 */
    /deep/ .el-input {
        width: 160px;
        // min-width:170px;
        // max-width:170px;
    }

    #payrollSearch{
        border-bottom: 1px solid #eff1f4;
        width: 98%;
        margin: 0 auto;
        padding-top: 25px;
        .payrollSearch-form{
            display: flex;
            justify-content: space-between;
            .payrollSearch-criteria{
                text-align: left;
            }
            .payrollSearch-button{
                text-align: right;
            }
        }
    }
</style>
